<template>
    <div>
        <el-form-item label="渐变方向">
            <el-select v-model="data.options.direction">
                <el-option value="left" label="向左"/>
                <el-option value="right" label="向右"/>
                <el-option value="top" label="向上"/>
                <el-option value="bottom" label="向下"/>
            </el-select>
        </el-form-item>
        <el-form-item label="渐变色1">
            <el-color-picker
                v-model="data.options.bgColor1"
            />
        </el-form-item>
        <el-form-item label="渐变色2">
            <el-color-picker
                v-model="data.options.bgColor2"
            />
        </el-form-item>
        <el-form-item label="容器阴影">
            <el-form-item label="阴影大小">
                <el-input type="number" v-model="data.options.shadowSize"></el-input>
            </el-form-item>
            <el-form-item label="阴影颜色" style="margin-top: 10px;margin-bottom: 0;padding: 0">
                <el-color-picker
                    v-model="data.options.shadowColor"
                />
            </el-form-item>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name: 'BaseBox',
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        }
    },
    methods: {
        changeValue(e) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            this.data.options.defaultValue = obj.code
            this.data.options.defaultCName = obj.name
        }
    }
}
</script>
